<template>
  <router-view></router-view>
</template>

<script setup>
import { ref } from 'vue';
import { Search } from '@element-plus/icons-vue';
import SubMenu from './components/SubMenu.vue';
import Header from './components/Header.vue';
import Footer from './components/Footer.vue';

const activeIndex = ref('1');
const showSubMenu = ref(false);
const currentMenuIndex = ref(0);
let mouseTimer = null;

const handleSearchFocus = (e) => {
  e.target.parentElement.classList.add('focus');
};

const handleSearchBlur = (e) => {
  e.target.parentElement.classList.remove('focus');
};

const menuItems = [
  { name: 'Xiaomi手机', hasSubmenu: true },
  { name: 'REDMI手机', hasSubmenu: true },
  { name: '电视', hasSubmenu: true },
  { name: '笔记本', hasSubmenu: true },
  { name: '平板', hasSubmenu: true },
  { name: '家电', hasSubmenu: true },
  { name: '路由器', hasSubmenu: true },
  { name: '服务中心', hasSubmenu: false },
  { name: '社区', hasSubmenu: false }
];

const handleSelect = (key) => {
  console.log(key);
};

const handleMouseEnter = (index) => {
  if (mouseTimer) {
    clearTimeout(mouseTimer);
  }
  if (menuItems[index].hasSubmenu) {
    currentMenuIndex.value = index;
    showSubMenu.value = true;
  }
};

const handleSubmenuEnter = () => {
  if (mouseTimer) {
    clearTimeout(mouseTimer);
  }
  showSubMenu.value = true;
};

const handleSubmenuLeave = () => {
  handleMouseLeave();
};

const handleMouseLeave = () => {
  mouseTimer = setTimeout(() => {
    showSubMenu.value = false;
  }, 200);
};
</script>

<style lang="scss">
* {
  margin: 0;
  padding: 0;
  list-style: none;
  text-decoration: none;
  box-sizing: border-box;
  font-size: 14px;
}

.app {
  width: 100vw;
  
  .nav {
    margin-top: 20px;
    position: relative;
    
    .content {
      width: 1226px;
      margin: 0 auto;
      display: flex;
      align-items: center;
    }
    .logo {
      width: 56px;
      height: 56px;
      margin-right: 172px;
    }
    .menu {
      flex: 1;
      .el-menu-demo {
        background-color: #fff;
        border-bottom: none;
        font-size: 16px;
        color: #333;
        
        .el-menu-item {
          padding: 0 20px;
          height: 56px;
          line-height: 56px;
          
          &:hover {
            color: #ff6700;
          }
        }
      }
    }
  }
  
  .search {
    .search-box {
      display: flex;
      align-items: center;
      width: 296px;
      height: 50px;
      border: 1px solid #e0e0e0;
      
      &.focus {
        border-color: #ff6700;
        .search-btn {
          border-color: #ff6700;
          background-color: #ff6700;
          color: #fff;
        }
      }
      
      input {
        flex: 1;
        height: 100%;
        padding: 0 15px;
        border: none;
        outline: none;
        font-size: 14px;
        
        &::placeholder {
          color: #b0b0b0;
        }
      }
      
      .search-btn {
        width: 52px;
        height: 48px;
        border: 1px solid #e0e0e0;
        background-color: #fff;
        color: #616161;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.2s;
        
        &:hover {
          background-color: #ff6700;
          color: #fff;
          border-color: #ff6700;
        }
        
        .el-icon {
          font-size: 18px;
        }
      }
    }
  }
}
</style>  